<template>
  <div>
    <div style="display: flex;flex-direction: row; justify-content: space-between; align-items: center; height: 40px">
      <el-button type="text" @click="triggerBtn">
        <i class="iconfont" :class="[showList ? 'el-icon-arrow-down' : 'el-icon-arrow-right']"></i>
        &nbsp;反馈关联
      </el-button>
      <el-button type="text" @click="addFeedBack" v-if="(curFormData.TestName || '').length === 0">
        <i class="iconfont el-icon-folder-add"></i>
        &nbsp;添加反馈关联
      </el-button>
    </div>
    <div v-if="curFormData.TestName">
      <ul class="showUl">
        <li>
          <div class="fankuiItem">
<!--            <span>{{ curFormData.TestName }}</span>-->
            <a class="link-name" @click.prevent="editDetil(curFormData)"
               :href="linkName(curFormData)"><span>{{curFormData.TestName}}</span></a>
            <span v-if="feedData.Acceptrealname">{{feedData.Acceptrealname}}</span>
            <span v-if="feedData.Status">{{statusFilterOptions(feedData.Status, 'TEST_STATUS')}}</span>
            <span v-if="feedData.Type">{{statusFilterOptions(feedData.Type, 'TEST_TYPE')}}</span>
            <div class="opear" :class="{'showClass' : showClass}">
              <el-dropdown @command="handleTags" trigger="click" class="editOpear"
                           @visible-change="visibleChange">
                <el-button type="text" style="font-size: 18px" title="更多">
                  <i class="el-icon-more"></i></el-button>
                <el-dropdown-menu size="small" slot="dropdown">
                  <el-dropdown-item command="edit" style="width: 100px">编辑</el-dropdown-item>
                  <el-dropdown-item command="del" style="width: 100px">删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <test-dialog :visible.sync="testVisible" :preFormData="preFormData" @selectData="selectData"></test-dialog>
  </div>
</template>

<script>
import testDialog from "../../proTest/testDialog";
import projectTestApi from "@/api/projectTestApi"
import {mapGetters} from "vuex";
export default {
  name: "feedBack",
  components: {
    testDialog
  },
  props: {
    formData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  computed: {
    ...mapGetters(['dictionary']),
    statusList() {
      return (DictTypeCode) => {
        return this.dictionary.filter(item => item.DictTypeCode === DictTypeCode)
      }
    },
    statusFilterOptions() {
      return (cellValue, DictTypeCode) => {
        let filter = this.statusList(DictTypeCode).filter(it => it.DictId === cellValue.toString())
        if (filter.length > 0) {
          return filter[0].DictName
        }
        return ''
      }
    },
    curFormData: {
      get () {
        return this.formData
      },
      set (val) {
        this.$emit('update:formData', val)
      }
    },
    linkName () {
      return (row) => {
        let hp = window.location.protocol
        let host = window.location.host
        return `${hp}//${host}/view/test/show/${row.Testid}`
      }
    },
  },
  data () {
    return {
      feedData: {},
      testVisible: false,
      showList: true,
      showClass: true,
      preFormData: {}
    }
  },
  methods: {
    triggerBtn () {
      this.showList = !this.showList
    },
    handleTags (tags) {
      if (tags === 'edit') {
        this.addFeedBack('edit')
      } else {
        this.delWorkingHours()
      }
    },
    // 添加反馈
    addFeedBack (type) {
      this.preFormData = {
        Projectid: this.formData.Projectid
      }
      if (type === 'edit') {
      } else {

      }
      this.testVisible = true
    },
    // 删除反馈
    delWorkingHours () {
    },
    visibleChange (a) {
      // this.showClass = a
    },
    // 选择反馈
    selectData (d) {
      this.$set(this.curFormData, `Testid`, d.Id)
      this.$set(this.curFormData, `TestName`, d.Name)
    },
    // 获取反馈
    getTestById () {
      if (this.curFormData.Testid) {
        projectTestApi.getDataById({id: this.curFormData.Testid}).then(res => {
          if (res && res.Tests) {
            this.curFormData.testList = {}
            this.$set(this.curFormData, `TestName`, res.Tests[0].Name)
            for (let [key, value] of Object.entries(res.Tests[0] || {})) {
              this.$set(this.feedData, `${key}`, value)
            }
          }
        })
      }
    },
    editDetil (row) {
      // this.editData = JSON.parse(JSON.stringify(row))
      // this.editVisible = true
      this.$router.push(`/view/test/show/${row.Testid}`)
    }
  },
  watch: {
    'curFormData.Testid': {
      immediate: true,
      deep: true,
      handler (n, o) {
        this.getTestById()
      }
    }
  }
}
</script>

<style scoped lang="scss">
.link-name {
  text-overflow: ellipsis;
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
}
.showUl li {
  height: 40px;
  border-bottom: 1px solid #EEEEEE;
  &:first-child {
    border-top: 1px solid #EEEEEE;
  }
  & .fankuiItem {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 0 20px;
    cursor: pointer;
    .opear {
      display: none;
    }
  }
  & .fankuiItem:hover {
    background-color: #f2f2f2;
    .opear {
      display: block;
    }
  }
  .showClass {
    display: block !important;
  }
}
</style>